(function($){
	$.lvi = {};
	$.lvi.fn = {};
	var win = window,
		doc = window.document;
	function SiteCategoryNav(elem,config){
		var defConfig = {
			minWidth : 194,
			maxWidth : 350,
			timer : 300,
			wrapperShowClass : 'nav-panel-wra-show',
			isForProductSign : 'nav-for-product'
		};
		this.conf = $.extend({}, defConfig, config);
		this.element = $('#'+elem);
		this._init();
	}
	SiteCategoryNav.prototype = {
		_init : function(){
			this.categories = $('.nav-cat-li',this.element);
			this.subcats = $('.nav-list div',this.element);
			this.panel = $('.nav-panel',this.element);
			this.panelWrapper = $('.nav-panel-wra',this.element);
			this.button = $('.nav-button',this.element);
			this.isForProduct = ($('.'+this.conf.isForProductSign).length>0 ? true : false);
			
			this.isShow = false;
			this.timerId = -1;
			this.fixShowTimerId = -1;
			
			this._attachEvent();
		},
		_attachEvent : function(){
			var self = this;
			if(this.isForProduct){
				this.button.bind('click',function(){
					if(self.element.hasClass(self.conf.isForProductSign)){
						self.element.removeClass(self.conf.isForProductSign);
					}else{
						self.element.addClass(self.conf.isForProductSign);
					}
				});
			}
			this.element.bind('mouseleave',function(){
				self.timerId = win.setTimeout(function(){
					self.isShow = false;
					self.hide();
					self.timerId = -1;
				},self.conf.timer);
			});
			this.categories.each(function(catIndex,catItem){
				var oItem = $(catItem);
				//oItem.attr( 'date-index', subIndex );
				(function(index,self){
					oItem.bind('mouseover',function(e){
							console.log(self.timerId)
						if(self.timerId>0){
							win.clearTimeout(self.timerId);
							self.timerId = -1;
							return;
						}
													
						if(!self.isShow){
							self.isShow = true;
							self.show();
						}
						
						self.subcats.each(function(subIndex,subItem){
							subItem.style.display = 'none';
							if(index == subIndex){
								subItem.style.display = 'block';
							}
						});
						self.highlight(index);
						
						//bug
						/*this.fixShowTimerId = win.setTimeout(function(){
							if(!self.panelWrapper.hasClass(self.wrapperShowClass)){
								self.panelWrapper.addClass(self.conf.wrapperShowClass);
							}
						},self.conf.timer);*/
						
					});
				})(catIndex,self);
			});
		},
		show : function(){	
			var self = this;
			this.panelWrapper.addClass(this.conf.wrapperShowClass);
			this.panel.animate({
				width : self.conf.maxWidth
			}, self.conf.timer, null);
		},
		hide : function(){
			var self = this;
			/*if(this.fixShowTimerId>0){
				win.clearTimeout(this.fixShowTimerId);
				this.fixShowTimerId = -1;
			}*/
			this.highlight(-1);
			this.panel.animate(
			{
				width : self.conf.minWidth 
			}, self.conf.timer/2,function(){
				self.panelWrapper.removeClass(self.conf.wrapperShowClass);
				if(self.isForProduct){
					self.element.addClass(self.conf.isForProductSign);
				}
			});
		},
		highlight : function (index){
			this.categories.each(function(tempIndex,tempItem){
				var oTempItem = $(tempItem);
				oTempItem.removeClass('nav-active');
				if(index == tempIndex){
					oTempItem.addClass('nav-active');
				}
			});
		}
	};
	$.lvi.fn.SiteCategoryNav = $.fn.SiteCategoryNav = SiteCategoryNav;
	//new SiteCategoryNav('category-nav',{});
	
	function MiniSlider(elem,config){
		var defConfig = {
			notchTimes : 300,
			sliderTimes : 500
		};
		this.conf = $.extend({}, defConfig, config);
		this.element = $('#'+elem);
		this._init();
	};
	MiniSlider.prototype = {
		_init : function(){
			this.nav = $('.mini-slider-nav',this.element);
			this.tabs = $('li',this.element);
			this.captions = $('.mini-slider-item',this.element);
			this.notch = $('.mini-slider-notch',this.element);
			
			this.currentIndex = -1;
			this.tabWidth = Math.floor(this.nav.innerWidth() / this.tabs.length);
			this.tabs.css({'width':this.tabWidth,'display':'block'}); 
			this.notchWidth = this.notch.width();
			this._attachEvent();
		},
		_attachEvent : function(){
			var self = this;
			this.tabs.each(function(index,item){
				var oItem = $(item);
				(function(i,el){
					el.bind('click',function(e){
						self.viewSlide(i);
					});
				})(index,oItem);
			});
		},
		viewSlide : function(index){
			var self = this;
			if(self.currentIndex == index){
				return;
			}
			self.currentIndex = index;
			self.tabs.each(function(j,item){
				var oItem = $(item);
				oItem.removeClass('active');
				if(j==index){
					oItem.addClass('active');
					var offsetLeft = oItem.context.offsetLeft,
						notchLeft = offsetLeft - Math.floor((self.notchWidth - self.tabWidth)/2);
					if(self.notch.css('display') == 'none'){
						self.notch.css('left',notchLeft);
						self.notch.show();
					}else{
						self.notch.animate({'left': notchLeft}, self.conf.notchTimes,null)
					}
				}
			});
			self.captions.each(function(j,item){
				var oItem = $(item);
				if(oItem.css('display') == 'block'){
					oItem.css('display','none')
					oItem.css('opacity',0) 
				}
				if(index == j){
					oItem.css('display','block') 
					$(item).animate({
						opacity: 1
					}, self.conf.sliderTimes, null);
				}
			});
		}
	};
	$.lvi.fn.MiniSlider = $.fn.MiniSlider = MiniSlider;
	//new MiniSlider('mini-slider',null);
})(jQuery);
